<template>
  <div style="margin: 20px;">
    <SearchNav :search="search" :select-obj="selectObj">
      <div slot="search" style="display: inline-block">
        <!--<el-button type="primary" style="margin-left: 10px;margin-top: 0;" @click="setAddlightDev()">绑定设备</el-button>-->
        <el-button type="primary" style="margin-left: 10px;margin-top: 0;" @click="handleDel()">导出</el-button>
      </div>
    </SearchNav>
    <TableShow :table-data="tableData" :row="row">
      <div slot="btn">
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="280"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDel(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </div>
      <div slot="page">
        <Paginations :paginations="paginations" @changePage="handleCurrentChange" />
      </div>
    </TableShow>
  </div>
</template>

<script>

import TableShow from '@/components/TableShow/TableShow.vue'
import SearchNav from '@/components/SearchNav/SearchNav.vue'
import Paginations from '@/components/Paginations/Paginations.vue'
export default {
  name: 'TableComp',
  components: {
    TableShow,
    SearchNav,
    Paginations
  },
  data() {
    return {
      tableData: [],
      row: [],
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 2, // 总数
        page_size: 10, // 1页显示多少条
        layout: 'total,prev, pager, next '// 翻页属性
      },
      tableBtn: {
        btn: [
          { type: 'success', name: '测试', fun: 'test' }
        ]
      },
      search: {
        type: '',
        text: ''
      },
      selectObj: [
        {
          id: 1,
          name: '名称'
        },
        {
          id: 2,
          name: 'mac'
        }
      ]
    }
  },
  created() {
    this.tableData = [
      {
        'username': 'admin',
        'nickname': 'Jane',
        'phone': '18402554852',
        'createDate': '2018-02-02 12:30:00',
        'dep': '开发部',
        'role': 'admin',
        'status': 1,
        'enabled': 1
      },
      {
        'username': 'user',
        'nickname': 'Jay',
        'phone': '18402551140',
        'createDate': '2018-02-02 12:30:00',
        'dep': '测试部',
        'role': 'admin',
        'status': 1,
        'enabled': 1
      }
    ]
    this.row = [
      { name: '用户名称', code: 'username' },
      { name: '手机号码', code: 'phone' },
      { name: '部门', code: 'dep', width: 200 }
    ]
  },
  methods: {
    test() {
      this.$message({
        message: '测试方法',
        type: 'info'
      })
    },
    handleEdit(data, index) {
      console.log(data, index)
    },
    setAddlightDev() {},
    handleCurrentChange(page) {
      console.log(page)
    }
  }
}
</script>

<style scoped>

</style>
